<template>
  <footer
    class="relative w-full py-4 border-t dark:border-gray-800 bg-white dark:bg-gray-900 z-30"
  >
    <div class="flex justify-center items-center flex-col">
      <div class="inline-flex items-center my-2">
        <a
          href="https://github.com/MarkShawn2020/mark-nuxt"
          target="_blank"
          class="inline-flex items-center mx-4 hover:text-primary-500"
        >
          <span class="hidden md:block">FORK ME ON</span>
          <SvgIconGithub class="w-6 h-6 mx-4"></SvgIconGithub>
        </a>

        <el-popover placement="top" :width="200" trigger="hover">
          <img src="~assets/img/mark-alipay-receipt-square.jpg" width="200px" />
          <span
            slot="reference"
            class="inline-flex items-end mx-4 cursor-pointer hover:text-primary-500"
          >
            <span class="hidden md:block">SUPPORT ME BY</span>
            <NcIconAlipay class="w-6 h-6 mx-4"></NcIconAlipay>
          </span>
        </el-popover>

        <el-popover placement="top" :width="200" trigger="hover">
          <img
            src="~assets/img/mark-wechat-add-friend-square.jpg"
            width="200px"
          />
          <span
            slot="reference"
            class="inline-flex items-end mx-4 cursor-pointer hover:text-primary-500"
          >
            <span class="hidden md:block">CONNECT ME VIA</span>
            <NcIconWechat class="w-6 h-6 mx-4"></NcIconWechat>
          </span>
        </el-popover>
      </div>

      <div class="text-lg underline my-4">THANKS FOR THESE PLATFORMS</div>

      <div class="inline-flex items-center h-6 m-2 font-bold">
        <p class="text-primary-500">JS |</p>

        <!-- Nuxt -->
        <SvgBuiltWithNuxtLight class="light h-6 m-2"></SvgBuiltWithNuxtLight>
        <SvgBuiltWithNuxtLight class="dark h-6 m-2"></SvgBuiltWithNuxtLight>

        <!-- Nuxt Content -->
        <img
          src="https://content.nuxtjs.org/logo-light.svg"
          class="light h-6 m-2"
        />
        <img
          src="https://content.nuxtjs.org/logo-dark.svg"
          class="dark h-6 m-2"
        />

        <!-- Vue -->
        <span class="inline-flex items-center">
          <img
            src="https://cn.vuejs.org/images/logo.png"
            alt="vue logo"
            class="h-6 m-2"
          />
          <p class="font-bold">Vue.js</p>
        </span>
      </div>

      <div class="inline-flex items-center h-6 m-2 font-bold">
        <p class="text-primary-500">UI |</p>

        <!-- Tailwind CSS -->
        <SvgLogoTailwindCSS class="h-6 m-2"></SvgLogoTailwindCSS>

        <!-- Element UI -->
        <img
          data-v-ad5d153c=""
          src=""
          alt="element-logo"
          class="h-6 m-2"
        />

        <!-- G6 -->
        <img
          src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*o-MuTpQaj7EAAAAAAAAAAABkARQnAQ"
          alt="Ant G6"
          class="h-10 m-0"
        />
      </div>

      <div class="inline-flex items-center h-6 m-2 font-bold">
        <p class="text-primary-500">Cloud |</p>
        <img
          src="https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png"
          alt="阿里云"
          class="h-4 m-3"
        />

        <SvgLogoTencent class="h-6 m-2 text-blue-500"></SvgLogoTencent>
      </div>

      <div class="inline-flex items-center h-6 m-2 font-bold">
        <p class="text-primary-500">API |</p>

        <img
          src="https://fastapi.tiangolo.com/img/logo-margin/logo-teal.png"
          alt="FastAPI"
          class="h-10 m-0"
        />
      </div>

      <!-- Typora -->
      <span class="inline-flex items-center h-6 m-2 font-bold">
        <p class="text-primary-500">Editor |</p>
        <img
          src="https://appmakes.io/_next/static/images/icon_128x128@2x-144-a1285cd2422184382d7a50056d9c21fe.png"
          class="h-6 m-2"
        />
        <p class="font-bold">Typora</p>
      </span>

      <div class="inline-flex items-center h-6 m-2 font-bold">
        <p class="text-primary-500">IDE |</p>
        <!-- WebStorm -->
        <SvgLogoWebStorm class="h-4 m-3"></SvgLogoWebStorm>
      </div>

      <div class="md:inline-flex my-2">
        <div class="mr-4">苏ICP备19039117号</div>
        <div class="mr-4">Copyright © 2020 Mark Shawn.</div>
        <div>All rights reserved.</div>
      </div>
    </div>
  </footer>
</template>

<script>
import NcIconWechat from '~/components/global/icon/NcIconWechat'
import NcIconAlipay from '~/components/global/icon/NcIconAlipay'
import SvgIconGithub from '~/components/global/svg/SvgIconGithub'
import SvgLogoTailwindCSS from '~/components/global/svg/SvgLogoTailwindCSS'
import SvgLogoTencent from '~/components/global/svg/SvgLogoTencent'
export default {
  name: 'CompFooter',
  components: {
    SvgLogoTencent,
    SvgLogoTailwindCSS,
    NcIconAlipay,
    NcIconWechat,
    SvgIconGithub,
  },
  computed: {
    availableLocales() {
      return this.$i18n.locales.filter((i) => i.code !== this.$i18n.locale)
    },
  },
}
</script>
